<template>
	<view class="recharge">
		<navBar title="充值"></navBar>

		<view class="header" @click="popup = true">
			<view class="title">支付方式</view>
			<view class="pay_type flex_r_between">
				<view class="left flex_center">
					<image :src="`/static/public/${pay_type == 1 ? 'wechat' : 'alipay'}.png`"></image>
					<text>{{pay_type == 1 ? '微信' : '支付宝'}}支付</text>
				</view>
				<u-icon name="arrow-right" color="#666666" size="24rpx"></u-icon>
			</view>
		</view>

		<view class="content">
			<view class="title">支付方式</view>
			<view class="input flex_center" @click="show = true">
				<text>￥</text>
				<i class="line"></i>
				<view :id="money ? '' : 'input-class'">
					{{money || '充值金额'}}
				</view>
			</view>
		</view>

		<mono-keyboard :btnColor="pay_type == 1 ? '#07C160' : '#009FE8'" confirmText="充值" :show="show" @change="change"
			@confirm="confirm"></mono-keyboard>

		<u-popup :safeAreaInsetBottom="false" :show="popup" mode="bottom" @close="popup = false">
			<view class="pay_type_choose">
				<view class="title">选择支付方式</view>
				<view class="pay_type_content">

					<view class="list flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png" mode="aspectFill"></image>
							<text>微信支付</text>
						</view>
						<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
					</view>

					<view class="list flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png" mode="aspectFill"></image>
							<text>支付宝支付</text>
						</view>
						<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
					</view>

				</view>

				<view class="btn" @click="popup = false">确认</view>
			</view>
		</u-popup>

		<!-- model 弹窗 -->
		<u-modal :show="showmodel" title="提示" content='充值成功' @close="showmodel = false" @cancel="showmodel = false"
			confirmText="我知道了" :showCancelButton="false" @confirm="onModel"></u-modal>

	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				show: false,

				money: '',

				pay_type: 1,

				popup: false,

				showmodel: false,

				order_id: 0,
			}
		},
		methods: {

			change(e) {
				this.money = e;
			},

			confirm(e) {
				this.show = false;
				this.payPopularizeBalance();
			},

			payPopularizeBalance() {
				if (Number(this.money) > 99999999) {
					return this.$util.msg('最大金额为999万');
				}
				uni.showLoading();
				this.$post('/popularize/payPopularizeBalance', {
					pay_type: this.pay_type,
					price: this.money
				}, true, () => {
					uni.hideLoading();
				}).then(res => {
					uni.hideLoading();
					this.order_id = res.data.order_id;
					this.$native.orderPay({
						order_id: this.order_id,
						pay_type: this.pay_type,
						type: 6
					});
				});
			},

			getPayStatus(type) {
				if (type == 'popularizePm') {
					this.showmodel = true;
					this.getPayStatusAgain();
					return '';
				}
			},

			onModel() {
				this.showmodel = false;
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm.getBalance();
				this.$util.back();
			},

			getPayStatusAgain() {
				this.$post('/pay/get_pay_status', {
					order_id: this.order_id,
					type: 6,
				}, false);
			},
		},

		onLoad() {
			window.getPayStatus = this.getPayStatus;
		}
	}
</script>

<style lang="less" scoped>
	.recharge {
		padding: 32rpx;
	}

	.header {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 40rpx 32rpx;

		.title {
			font-size: 32rpx;
			color: #131313;
		}

		.pay_type {
			margin-top: 30rpx;

			.left {
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}

				text {
					font-size: 32rpx;
					color: #131313;
				}
			}
		}

	}

	.content {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 40rpx 90rpx;
		margin-top: 20rpx;

		.title {
			font-size: 32rpx;
			color: #131313;
		}

		.input {
			padding: 40rpx 0;
			border-bottom: 2rpx solid #EEEEEE;

			text {
				font-weight: 500;
				font-size: 64rpx;
				color: #131313;
			}

			// .line {
			// 	width: 4rpx;
			// 	height: 64rpx;
			// 	background: #FD2A53;
			// }
			view {
				font-size: 32rpx;
				color: #333333;
				flex: 1;
			}

			#input-class {
				color: #666666;
			}
		}
	}

	.pay_type_choose {
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 32rpx 32rpx 64rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			text-align: center;
		}

		.pay_type_content {
			background: #F8F8F8;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 24rpx 0 64rpx;

			.list {
				height: 100rpx;
				padding: 0 32rpx;

				.left {
					text {
						font-size: 28rpx;
						color: #131313;
						margin-left: 16rpx;
					}

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.btn {
			width: 560rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>